[Storybook] Configure Aphrodite to Not Append !important to Styles #2107

mark-fitzgerald · 2025-01-14T23:16:01Z

Summary:

Aphrodite appends !important to all styling, by default. This is cumbersome for debugging and for writing appropriately defined rulesets. This configuration change causes Aphrodite to NOT append !important. This change is limited to our dev environments (i.e. Storybook). Webapp has already implemented this, and handles Perseus styling accordingly.

Additionally, this change uncovered a bug that causes an incorrect option to display as blue instead of red. The styling logic was refactored to account for the removal of !important and to clarify how styling is applied based upon the widget options.

Issue: LEMS-2227

Test plan:

Open Storybook locally.
Inspect any widget with the browser inspect tool.
Note the significant lack of !important suffixes.

Test plan for bugfix:

Open Storybook locally.
Navigate to Perseus > Widgets > Radio > Choice > Review Mode
Note that the third item ("Incorrect (selected)") is red, and not blue.

…tant to Styles

… !important.

github-actions · 2025-01-14T23:18:29Z

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (4f0f8cf) and published it to npm. You
can install it using the tag PR2107.

Example:

yarn add @khanacademy/perseus@PR2107

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR2107

github-actions · 2025-01-14T23:19:02Z

Size Change: +15 B (0%)

Total Size: 1.48 MB

Filename	Size	Change
`packages/perseus/dist/es/index.js`	379 kB	+15 B (0%)

ℹ️ View Unchanged

Filename	Size
`packages/kas/dist/es/index.js`	39 kB
`packages/keypad-context/dist/es/index.js`	760 B
`packages/kmath/dist/es/index.js`	86.9 kB
`packages/math-input/dist/es/index.js`	77.6 kB
`packages/math-input/dist/es/strings.js`	1.79 kB
`packages/perseus-core/dist/es/index.js`	46.3 kB
`packages/perseus-editor/dist/es/index.js`	688 kB
`packages/perseus-linter/dist/es/index.js`	22.2 kB
`packages/perseus-score/dist/es/index.js`	115 kB
`packages/perseus/dist/es/strings.js`	6.06 kB
`packages/pure-markdown/dist/es/index.js`	3.66 kB
`packages/simple-markdown/dist/es/index.js`	12.5 kB

_{compressed-size-action}

…d the imported LESS files.

jeremywiebe · 2025-01-18T01:55:00Z

.storybook/main.ts

+// Once the LESS files have cascade layers included (a more involved task for a later time),
+//     then the following plugin option should be removed.


Thanks for documenting the exit path. Do you think it's worth creating a ticket and noting it here?

I vote for a ticket created and linked here so we don't forget. 😊

catandthemachines

Approved, added a note about linking a ticket for follow-up.

catandthemachines · 2025-01-22T19:22:16Z

.storybook/main.ts

+// Once the LESS files have cascade layers included (a more involved task for a later time),
+//     then the following plugin option should be removed.


I vote for a ticket created and linked here so we don't forget. 😊

Adjust styling logic to use classes instead of inline styling.

mark-fitzgerald · 2025-01-25T00:10:45Z

packages/perseus/src/widgets/radio/choice-icon/choice-icon.tsx

-        // particular, at large zoom levels this line height does almost
-        // nothing, but at the default size this shifts the letter down one
-        // pixel so it is much better centered.
-        lineHeight: "1px",


This doesn't appear to have any effect other than when isolated in a Storybook example. Removing it in an actual exercise has no effect.

…tant to Styles [Radio] Bugfix - Incorrect choice showing as blue instead of red

… into LEMS-2227-adjust-aphrodite-to-not-use-important

…age for debugging.

… into LEMS-2227-adjust-aphrodite-to-not-use-important

…eviously answered incorrect choices that are still showing.

… into LEMS-2227-adjust-aphrodite-to-not-use-important

@benchristel

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @khanacademy/[email protected] ### Minor Changes - [#2194](#2194) [`fd606f43d`](fd606f4) Thanks [@benchristel](https://github.com/benchristel)! - Create a function to get the public options for an interactive graph widget - [#2189](#2189) [`3ba74d173`](3ba74d1) Thanks [@benchristel](https://github.com/benchristel)! - Create a function to get the public options for a Table widget - [#2200](#2200) [`47cebd20f`](47cebd2) Thanks [@nishasy](https://github.com/nishasy)! - [Mafs] Remove mafs flag from Interactive Graph code - [#2207](#2207) [`097176a26`](097176a) Thanks [@benchristel](https://github.com/benchristel)! - Create a function to get the public options for a Matrix widget - [#2216](#2216) [`b3c562ac2`](b3c562a) Thanks [@Myranae](https://github.com/Myranae)! - Implement a widget export function to filter out rubric data from widget options for the Plotter widget - [#2198](#2198) [`649e6b16a`](649e6b1) Thanks [@benchristel](https://github.com/benchristel)! - Create a function to get the public options for a Grapher widget - [#2217](#2217) [`07779783a`](0777978) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Move coord reverse logic for Angle graphs into scoring logic - [#2183](#2183) [`cac39013b`](cac3901) Thanks [@Myranae](https://github.com/Myranae)! - Implement a widget export function to filter out rubric data from widget options for the Radio widget - [#2188](#2188) [`163dd67d2`](163dd67) Thanks [@Myranae](https://github.com/Myranae)! - Implement a widget export function to retrieve public widget options for the IFrame widget ### Patch Changes - [#2107](#2107) [`b44c8cb0a`](b44c8cb) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - [Storybook] Configure Aphrodite to Not Append !important to Styles [Radio] Bugfix - Incorrect choice showing as blue instead of red - [#2191](#2191) [`55317d65e`](55317d6) Thanks [@nishasy](https://github.com/nishasy)! - [SR] Polygon (unlimited) - Add screen reader experience - [#2220](#2220) [`6b8185885`](6b81858) Thanks [@nishasy](https://github.com/nishasy)! - [SR] Stop graph from exposing random empty image to screen readers - [#2185](#2185) [`f83a1fb03`](f83a1fb) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - [Bugfix] Zoomable content within a collapsed parent not showing when expanded (Mobile only) - [#2222](#2222) [`55be8a775`](55be8a7) Thanks [@dependabot](https://github.com/apps/dependabot)! - Updating wonderblocks package versions. - [#2173](#2173) [`10ee67a9c`](10ee67a) Thanks [@nishasy](https://github.com/nishasy)! - [SR] Polygon - Add screen reader experience - [#2196](#2196) [`b07f2936f`](b07f293) Thanks [@nishasy](https://github.com/nishasy)! - [SR] Segment - fix 2 strings with typos - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`7ec6c2fbc`](7ec6c2f), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`55be8a775`](55be8a7), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Minor Changes - [#2194](#2194) [`fd606f43d`](fd606f4) Thanks [@benchristel](https://github.com/benchristel)! - Create a function to get the public options for an interactive graph widget - [#2189](#2189) [`3ba74d173`](3ba74d1) Thanks [@benchristel](https://github.com/benchristel)! - Create a function to get the public options for a Table widget - [#2207](#2207) [`097176a26`](097176a) Thanks [@benchristel](https://github.com/benchristel)! - Create a function to get the public options for a Matrix widget - [#2216](#2216) [`b3c562ac2`](b3c562a) Thanks [@Myranae](https://github.com/Myranae)! - Implement a widget export function to filter out rubric data from widget options for the Plotter widget - [#2198](#2198) [`649e6b16a`](649e6b1) Thanks [@benchristel](https://github.com/benchristel)! - Create a function to get the public options for a Grapher widget - [#2217](#2217) [`07779783a`](0777978) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Move coord reverse logic for Angle graphs into scoring logic - [#2183](#2183) [`cac39013b`](cac3901) Thanks [@Myranae](https://github.com/Myranae)! - Implement a widget export function to filter out rubric data from widget options for the Radio widget - [#2188](#2188) [`163dd67d2`](163dd67) Thanks [@Myranae](https://github.com/Myranae)! - Implement a widget export function to retrieve public widget options for the IFrame widget ## @khanacademy/[email protected] ### Minor Changes - [#2200](#2200) [`47cebd20f`](47cebd2) Thanks [@nishasy](https://github.com/nishasy)! - [Mafs] Remove mafs flag from Interactive Graph code ### Patch Changes - [#2190](#2190) [`7ec6c2fbc`](7ec6c2f) Thanks [@nishasy](https://github.com/nishasy)! - Add convertRadiansToDegrees function to kmath - [#2222](#2222) [`55be8a775`](55be8a7) Thanks [@dependabot](https://github.com/apps/dependabot)! - Updating wonderblocks package versions. - [#2208](#2208) [`6a0bf7a52`](6a0bf7a) Thanks [@nishasy](https://github.com/nishasy)! - [SR Tree] Handle SR Tree when multiple editors are on the page - [#2193](#2193) [`8d569b74c`](8d569b7) Thanks [@beaesguerra](https://github.com/beaesguerra)! - Update internal addStyle variable name to address aphrodite-add-style-variable-name linting rule - Updated dependencies \[[`fd606f43d`](fd606f4), [`b44c8cb0a`](b44c8cb), [`3ba74d173`](3ba74d1), [`55317d65e`](55317d6), [`47cebd20f`](47cebd2), [`7ec6c2fbc`](7ec6c2f), [`6b8185885`](6b81858), [`f83a1fb03`](f83a1fb), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`55be8a775`](55be8a7), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`10ee67a9c`](10ee67a), [`163dd67d2`](163dd67), [`b07f2936f`](b07f293)]: - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Minor Changes - [#2217](#2217) [`07779783a`](0777978) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Move coord reverse logic for Angle graphs into scoring logic ### Patch Changes - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`7ec6c2fbc`](7ec6c2f), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - [#2190](#2190) [`7ec6c2fbc`](7ec6c2f) Thanks [@nishasy](https://github.com/nishasy)! - Add convertRadiansToDegrees function to kmath - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - [#2222](#2222) [`55be8a775`](55be8a7) Thanks [@dependabot](https://github.com/apps/dependabot)! - Updating wonderblocks package versions. - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Minor Changes - [#2200](#2200) [`47cebd20f`](47cebd2) Thanks [@nishasy](https://github.com/nishasy)! - [Mafs] Remove mafs flag from Interactive Graph code ### Patch Changes - [#2107](#2107) [`b44c8cb0a`](b44c8cb) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - [Storybook] Configure Aphrodite to Not Append !important to Styles [Radio] Bugfix - Incorrect choice showing as blue instead of red - [#2222](#2222) [`55be8a775`](55be8a7) Thanks [@dependabot](https://github.com/apps/dependabot)! - Updating wonderblocks package versions. - Updated dependencies \[[`fd606f43d`](fd606f4), [`3ba74d173`](3ba74d1), [`7ec6c2fbc`](7ec6c2f), [`097176a26`](097176a), [`b3c562ac2`](b3c562a), [`55be8a775`](55be8a7), [`649e6b16a`](649e6b1), [`07779783a`](0777978), [`cac39013b`](cac3901), [`163dd67d2`](163dd67)]: - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] Author: khan-actions-bot Reviewers: benchristel Required Reviewers: Approved By: benchristel Checks: ⏭️ Publish npm snapshot, ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x) Pull Request URL: #2186

Mark Fitzgerald added 2 commits January 14, 2025 15:10

docs(changeset): [Storybook] Configure Aphrodite to Not Append !impor…

e49d6d6

…tant to Styles

Add alias to vite config file to ensure that Aphrodite doesn't append…

698506a

… !important.

mark-fitzgerald self-assigned this Jan 14, 2025

Remove unnecessary import statement.

908d55b

mark-fitzgerald marked this pull request as ready for review January 14, 2025 23:29

mark-fitzgerald requested a review from a team January 14, 2025 23:30

jeremywiebe approved these changes Jan 15, 2025

View reviewed changes

Mark Fitzgerald added 3 commits January 16, 2025 16:26

Update Storybook's configuration of Vite to wrap cascade layers aroun…

9c2bed1

…d the imported LESS files.

Merge branch 'main' into LEMS-2227-adjust-aphrodite-to-not-use-important

1acacc2

Prettier.

4a233c9

jeremywiebe approved these changes Jan 18, 2025

View reviewed changes

Notes regarding dynamic styling

8f8b6e1

catandthemachines approved these changes Jan 22, 2025

View reviewed changes

Mark Fitzgerald added 2 commits January 23, 2025 17:36

Adjust cross-out line to be better positioned.

e735556

Adjust styling logic to use classes instead of inline styling.

Remove refactored code.

5da033d

mark-fitzgerald commented Jan 25, 2025

View reviewed changes

Mark Fitzgerald and others added 12 commits January 24, 2025 16:14

docs(changeset): [Storybook] Configure Aphrodite to Not Append !impor…

eb6816e

…tant to Styles [Radio] Bugfix - Incorrect choice showing as blue instead of red

Merge branch 'main' into LEMS-2227-adjust-aphrodite-to-not-use-important

977a002

Remove older changeset file.

62396f8

Update unit tests and snapshots.

8eaeb12

Update snapshots

b8e20bc

[LEMS-2227-adjust-aphrodite-to-not-use-important] Merge branch 'main'…

8756b0f

… into LEMS-2227-adjust-aphrodite-to-not-use-important

[LEMS-2227-adjust-aphrodite-to-not-use-important] Merge branch 'main'…

b047e3c

… into LEMS-2227-adjust-aphrodite-to-not-use-important

[LEMS-2227-adjust-aphrodite-to-not-use-important] Merge branch 'main'…

960e11d

… into LEMS-2227-adjust-aphrodite-to-not-use-important

[LEMS-2227-adjust-aphrodite-to-not-use-important] Adding console mess…

ba8bb5a

…age for debugging.

[LEMS-2227-adjust-aphrodite-to-not-use-important] Merge branch 'main'…

387b30d

… into LEMS-2227-adjust-aphrodite-to-not-use-important

[LEMS-2227-adjust-aphrodite-to-not-use-important] Adjust color for pr…

ba439ee

…eviously answered incorrect choices that are still showing.

[LEMS-2227-adjust-aphrodite-to-not-use-important] Merge branch 'main'…

4f0f8cf

… into LEMS-2227-adjust-aphrodite-to-not-use-important

mark-fitzgerald merged commit b44c8cb into main Feb 5, 2025
8 checks passed

mark-fitzgerald deleted the LEMS-2227-adjust-aphrodite-to-not-use-important branch February 5, 2025 21:41

khan-actions-bot mentioned this pull request Feb 5, 2025

Version Packages #2186

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Storybook] Configure Aphrodite to Not Append !important to Styles #2107

[Storybook] Configure Aphrodite to Not Append !important to Styles #2107

mark-fitzgerald commented Jan 14, 2025 •

edited

Loading

github-actions bot commented Jan 14, 2025 •

edited

Loading

github-actions bot commented Jan 14, 2025 •

edited

Loading

jeremywiebe Jan 18, 2025

catandthemachines Jan 22, 2025

mark-fitzgerald Jan 25, 2025

catandthemachines left a comment

catandthemachines Jan 22, 2025

mark-fitzgerald Jan 25, 2025

		// Once the LESS files have cascade layers included (a more involved task for a later time),
		// then the following plugin option should be removed.

[Storybook] Configure Aphrodite to Not Append !important to Styles #2107

[Storybook] Configure Aphrodite to Not Append !important to Styles #2107

Conversation

mark-fitzgerald commented Jan 14, 2025 • edited Loading

Summary:

Test plan:

Test plan for bugfix:

github-actions bot commented Jan 14, 2025 • edited Loading

npm Snapshot: Published

github-actions bot commented Jan 14, 2025 • edited Loading

jeremywiebe Jan 18, 2025

Choose a reason for hiding this comment

catandthemachines Jan 22, 2025

Choose a reason for hiding this comment

mark-fitzgerald Jan 25, 2025

Choose a reason for hiding this comment

catandthemachines left a comment

Choose a reason for hiding this comment

catandthemachines Jan 22, 2025

Choose a reason for hiding this comment

mark-fitzgerald Jan 25, 2025

Choose a reason for hiding this comment

mark-fitzgerald commented Jan 14, 2025 •

edited

Loading

github-actions bot commented Jan 14, 2025 •

edited

Loading

github-actions bot commented Jan 14, 2025 •

edited

Loading